<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import { ElOption, ElTree } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oTreeSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  ...IgnoreProps
}
export const oTreeProps = {
  ...ElTree.props,
  ...oTreeSelfProps
}
export type oTreePropsType = ExtractPropTypes<typeof oTreeProps>
const oTree = defineComponent({
  name: 'one-tree',
  props: oTreeProps,
  // inheritAttrs: false,
  components: { ElTree },
  setup(props: oTreePropsType, context) {
    const inProps = omitSelfProps<oTreePropsType, typeof oTreeSelfProps>(
      props,
      oTreeSelfProps
    )

    return () => (
      <ElTree
        {...inProps}
        class={oTree.name}
        v-model={props.formData![props.prop!]}
        v-slots={context.slots}
      ></ElTree>
    )
  }
})
export default oTree
</script>
<style lang="scss" scoped></style>
